<template>
  	<div id="myDownManage">
  		<header>
  			<i @click="goBack()"></i>
  			<div>{{$route.query.title}}</div>
  			<span @click="isShow=true" v-if="!isShow">管理</span>
  			<span @click="isShow=false" v-if="isShow">完成</span>
  		</header>
  		<div class="border-8"></div>
		<ul>
	  		<li v-for="x in list">
	  			<a >
	  				<label>
	  					<input type="checkbox" v-model="type" :value="x">
	  					<span v-show="isShow"></span>
		  				<p>
			             <img src="../../image/_pausecolumn3.png" width="33" height="33" alt="">
			            </p>
			            <h3>第{{x}}节：预防蛀牙的有效有效有效有效有效措施？</h3>
		            </label>	
	  			</a>
	  		</li>
	  	</ul>
	  	<div class="manageBtns" v-if="isShow">
	  		<a @click="selectAll()" v-show='!isSelectAll' class="red">全选</a>
	  		<a @click="selectAll()" v-show='isSelectAll' class="red">取消全选</a>
	  		<a @click="del()" v-show='!isSelectAll'>删除</a>
	  		<a @click="del()" v-show='isSelectAll' class="red">删除全部</a>
	  	</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [0,1,2,3],
				isShow: false,
				type: [],
				isSelectAll: false
			}
		},
		components: {
			
		},
		methods: {
			goBack() {
				this.$router.push({path:'/myDown'})
			},
			selectAll() {
				var _this = this;
				if(!this.isSelectAll) {  //全选
					_this.type = [];
					_this.list.forEach(function(item) {
						_this.type.push(item);
					});
					_this.isSelectAll = true;
				}else {   //反选
					_this.type = [];
					_this.isSelectAll = false;
				}
				console.log(this.type);
			},
			del() {
				console.log(this.type);
			}
			
		},
		created() {
			// this.$api.get("topics", null, r => {
			// 	console.log(r);
			// 	this.list = [1,2,3];	
			// })
		}
	}
</script>
<style lang="scss">
</style>
